﻿@page "/components/radio"

<DocsPage>
    <DocsPageHeader Title="Radio" Component="@nameof(MudRadio<T>)" SubTitle="Radio buttons allow the user to select a single choice from a group of options.">
        <Description>
            Use radio buttons (not switches) when only one item can be selected from a list.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="RadioGroup">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioGroupExample)" ShowCode="false">
                <RadioGroupExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioGroupColorExample)" ShowCode="false">
                <RadioGroupColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Dense">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioDenseExample)">
                <RadioDenseExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioSizeExample)">
                <RadioSizeExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Content Placement">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioContentPlacementExample)" ShowCode="false">
                <RadioContentPlacementExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="ReadOnly and Disabled mode">
                <Description>
                    <MudText>All child <CodeInline>MudRadio</CodeInline> components can be <CodeInline>Disabled</CodeInline> or set as <CodeInline>ReadOnly</CodeInline> from the parent <CodeInline>MudRadioGroup</CodeInline>.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioReadOnlyDisabledExample)">
                <RadioReadOnlyDisabledExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Accessibility">
                <Description>
                    <MudText Class="mb-2">
                        A <CodeInline>MudRadioGroup</CodeInline> accepts the following shortcuts:
                    </MudText>
                    <MudSimpleTable Outlined="true"
                                    Hover="true">
                        <thead>
                        <tr>
                            <th>Keys</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <CodeInline>Tab</CodeInline>,
                                <CodeInline>Shift+Tab</CodeInline>
                            </td>
                            <td>Move focus into or out of the radio group</td>
                        </tr>
                        <tr>
                            <td>
                                <CodeInline>Enter</CodeInline>,
                                <CodeInline>NumpadEnter</CodeInline>,
                                <CodeInline>Space</CodeInline>
                            </td>
                            <td>Select the focused radio button</td>
                        </tr>
                        <tr>
                            <td>
                                <CodeInline>Left Arrow</CodeInline>,
                                <CodeInline>Up Arrow</CodeInline>,
                                <CodeInline>Right Arrow</CodeInline>,
                                <CodeInline>Down Arrow</CodeInline>
                            </td>
                            <td>Cycle focus between radio buttons</td>
                        </tr>
                        <tr>
                            <td>
                                <CodeInline>Backspace</CodeInline>
                            </td>
                            <td>Unselect the focused radio button</td>
                        </tr>
                        </tbody>
                    </MudSimpleTable>
                    <MudAlert Severity="Severity.Info" Class="my-3">
                        Note: <CodeInline>@nameof(MudRadioGroup<T>.Disabled)</CodeInline> radio buttons are unaffected by these shortcuts and cannot be focused
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(RadioKeyboardNavigationExample)" ShowCode="false">
                <RadioKeyboardNavigationExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
